<template>
    <div class="wrapper" :class="cname">
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide class="slide-1">1</swiper-slide>
        <swiper-slide class="slide-2">2</swiper-slide>
        <swiper-slide class="slide-3">3</swiper-slide>
      </swiper>        
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide class="slide-1">111</swiper-slide>
        <swiper-slide class="slide-2">222</swiper-slide>
        <swiper-slide class="slide-3">333</swiper-slide>
        <!-- <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> -->
      </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
    name: "swiperpagecomponent",
    components: {
        swiper,
        swiperSlide
    }, 
    props: {
        cname: String
    },
    data() {
      return {
        swiperOptionTop: {
          spaceBetween: 1,
        },
        swiperOptionThumbs: {
          spaceBetween: 1,
          centeredSlides: false,        
          slidesPerView: 3,
          touchRatio: 0.2,
          slideToClickedSlide: true,
        //   observeParents:true,
        //   observe:true,
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        // swiperTop.controller.control = swiperThumbs
        // swiperThumbs.controller.control = swiperTop
        swiperThumbs.on('click',function(){
            console.log(this)
            swiperThumbs.slideTo(this.clickedIndex, 600, false)
            swiperTop.slideTo(this.clickedIndex, 600, false)
        })
      })
    },
    methods: {

    }           
}
</script>

<style lang="css" scoped>
  .swiper-container {
    width: 100%;
    height:auto;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    height: 100%;
    width: 100%;
  }
  .gallery-thumbs {
    height: auto;
    box-sizing: border-box;
  }
  .gallery-thumbs .swiper-slide {
    width: 33.333333333333336%;
    height: auto;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
</style>